<template>
  <div>
    <h1>【aty-message】 component demo</h1>
    <p>【aty-message】 本质  "无实例",掉全局方法</p>
    <aty-row class="fd-message-box">
      <aty-row>
        <aty-title level="4">1.【aty-message】 基础</aty-title>
        <aty-panel>最基本的提示，默认在1.5秒后消失。</aty-panel>
        <aty-button type="primary" @click="info" />
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-message】 提示类型 </aty-title>
        <aty-button @click="success">Display success prompt</aty-button>
        <aty-button @click="warning">Display warning prompt</aty-button>
        <aty-button @click="error">Display error prompt</aty-button>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-message】 加载中  </aty-title>
        <aty-button @click="loading">Display loading...</aty-button>
      </aty-row>
      <aty-row>
        <aty-title level="4">4.【aty-message】 自定义时长  </aty-title>
        <aty-button @click="time">Displays a 10 second prompt</aty-button>
      </aty-row>
      <aty-row>
        <aty-title level="4">5.【aty-message】 自定义时长  </aty-title>
        <aty-button @click="closable">Display a closable message</aty-button>
      </aty-row>
      <aty-row>
        <aty-title level="4">6.【aty-message】 自定义 Render 函数  </aty-title>
        <aty-button @click="renderFunc">show message</aty-button>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  //  components: { Alert, Icon }
  methods: {
    info () {
      Artery.message.info('This is a info tip')
    },
    success () {
      Artery.message.success('This is a success tip')
    },
    warning () {
      Artery.message.warning('This is a warning tip')
    },
    error () {
      Artery.message.error('This is an error tip')
    },
    loading () {
      const msg = Artery.message.loading({
        content: 'Loading...',
        duration: 0
      })
      setTimeout(msg, 3000)
    },
    time () {
      Artery.message.info({
        content: 'will be gone in 10 seconds',
        duration: 10
      })
    },
    closable () {
      Artery.message.info({
        content: 'Tips for manual closing',
        duration: 30,
        closable: true
      })
    },
    renderFunc () {
      Artery.message.info({
        render: h => {
          return h('span',
            [
              'This is created by ',
              h('a', 'render'),
              ' function'
            ]
          )
        }
      })
    }
  }
}
</script>
<style  lang="less" type="text/less"  scoped>
    .fd-message-box {
        margin: 20px;
        text-align: left;
    }
</style>
